<script lang="ts">
import {reactive} from "vue";

interface userNameInterface {
  name: string,
  age: number
}

export default {
  name: "App",
  setup() {
    const userInfo: userNameInterface = reactive<userNameInterface>({name: "陶品奇", age: 22})
    const change: () => void = (): void => {
      userInfo.name = "马云"
      userInfo.age = 55
    }
    return {
      userInfo,
      change
    }
  },

}
</script>

<template>
  <div class="app">
    <h1>{{ userInfo.name }}</h1>
    <h1>{{ userInfo.age }}</h1>
    <button @click="change">change</button>
  </div>
</template>

<style scoped>
.app {
  width: 800px;
  height: 300px;
  margin: 0 auto;
}
</style>
